// 导入path 路径拼接模块
var path = require('path')
// 导入在内存中生成 HTML 页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 导出一个配置对象，将来在webpack启动时，会默认查找webpack.config.js,并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    entry: path.join(__dirname, './src/main.js'),  //项目入口文件
    output: { //配置输出的路径
        path: path.join(__dirname, './dist'), //指定打包好的文件输出到哪个目录中去
        filename: 'bundle.js' //这是指定输出的文件的名称
    },
    plugins: [ //配置插件的节点
        new htmlWebpackPlugin({ //创建一个在内存中生成html 页面的插件
            template: path.join(__dirname, './src/index.html'), //指定 模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面的名称
        })
    ],
    module: { //这个节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理， .css文件的地方 loader 规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理， .less文件的地方 loader规则
            { test: /\.jpg|jpeg|png|gif|bmp$/, use: 'url-loader?limit=189263&name=[hash:8]-[name].[ext]' }, // 处理图片路径的 loader
            { test: /\.eot|svg|ttf|woff|woff2$/, use: 'url-loader' }, //字体文件处理的 loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, use: 'vue-loader'}
        ]
    },
    resolve: { //设置 Vue 被导入时候的包的路径
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
} 